<template>
    <div class="nav">
        <div class="userInfo">   
            <div class="userImg">
                <img :src="userImg" alt="">  
            </div>
            <span class="userName">张点点</span>
        </div>
        <nav>
            <ul class="list" >
                <router-link tag="li" :to="{ path: 'home' }" class="item" v-for="(item,index) in funData" :key=index>
                    <img :src="item.img" alt="">
                    <span class="rolefunction">{{item.name}}</span>
                </router-link>
            </ul>
        </nav>
    </div>
</template>
<script>
    export default {
        name: 'MainNav',
        data () {
            return {
                userImg:require('@/assets/userImg.png'),
                funData:[
                            {   
                                img:require('@/assets/home.png'),              
                                name:"首页"
                            },
                             {   
                                img:require('@/assets/appointment.png'),              
                                name:"预约管理"
                            },
                             {   
                                img:require('@/assets/room.png'),              
                                name:"科室管理"
                            },
                             {   
                                img:require('@/assets/doctor.png'),              
                                name:"医生管理"
                            },
                             {   
                                img:require('@/assets/account.png'),              
                                name:"账户管理"
                            },
                            {   
                                img:require('@/assets/role.png'),              
                                name:"角色管理"
                            },
                             {   
                                img:require('@/assets/patient.png'),              
                                name:"患者管理"
                            },
                             {   
                                img:require('@/assets/expert.png'),              
                                name:"专家培训"
                            },
                            {   
                                img:require('@/assets/tech.png'),              
                                name:"技术培训"
                            },
                            {   
                                img:require('@/assets/work.png'),              
                                name:"业务分析"
                            },
                             {   
                                img:require('@/assets/form.png'),              
                                name:"报表管理"
                            }
                             
                        ]

            }
        }
    }
</script>
<style lang="stylus" scoped>
    .nav{
        width:1.3020833333333333rem;
        background:#fff;
        .userInfo{
            display:flex;
            justify-content:center;
            flex-direction:column;
            align-items: center;
            border-bottom:1px solid #3FBDFF;/*no*/
            img{
                width:68px;
                height:68px;
                align-self: baseline;
                margin-top:.0520833333333333rem;
            }
            .userName{
                font-size:14px;/*px*/
                font-weight:400;
                margin-top:.0677083333333333rem;
                margin-bottom:.0520833333333333rem;
            }
        }
        nav{
            .list{
                margin-left:.1197916666666667rem;
                .item{
                    display:flex;
                    align-items :center;
                    height :.2083333333333333rem;
                    cursor:pointer;
                    img{
                        width:24px;
                        height:24px;
                    }
                    .rolefunction{
                        margin-left:.0520833333333333rem;
                        font-size:14px;/*px*/
                        font-weight:400;
                        color:#000;
                    }
                }   
            }
        }
    }
</style>